<template>
  <div class="pagination-container">
    <Pagination
      hideOnSinglePage
      :current="current"
      :total="total"
      :page-size="pageSize"
      :show-size-changer="false"
      :show-quick-jumper="false"
      :show-less-items="true"
      :show-total="showTotal"
      class="custom-pagination"
      @change="handleChange"
    />
  </div>
</template>

<script setup lang="ts">
  import { Pagination } from 'ant-design-vue';

  interface Props {
    current: number;
    total: number;
    pageSize?: number;
    showTotal?: (total: number, range: [number, number]) => string;
  }

  interface Emits {
    (e: 'update:current', page: number): void;
    (e: 'change', page: number): void;
  }

  withDefaults(defineProps<Props>(), {
    pageSize: 10,
    showTotal: (total: number, range: [number, number]) => `第 ${range[0]}-${range[1]} 条，共 ${total} 条`,
  });

  const emit = defineEmits<Emits>();

  const handleChange = (page: number) => {
    emit('update:current', page);
    emit('change', page);
  };
</script>

<style scoped lang="scss">
  @use '../css/blog.scss' as *;
</style>
